<script setup>
  import { onMounted, reactive, ref } from 'vue'
  import organApi from '@/biz/organization'
  const emits = defineEmits(['update'])
  const props = defineProps({
    level: {
      type: Number,
      default: 3
    },
    type: {
      // 1 机构区域
      type: Number,
      default: 0
    },
    isShowProject: Boolean,
    isShowHouse: Boolean
  })
  defineExpose({ getBusinessList })

  onMounted(() => {
    getBusinessList()
  })
  const treeListBusiness = ref([])
  let orgObj = reactive({})
  let orgCheck = reactive({})
  let orgId = ref()
  //获取组织架构
  function getBusinessList(data) {
    let prom =
      props.type == 1
        ? organApi.getInsOrganization(props.level)
        : organApi.getOrganization({
            level: props.level,
            isShowProject: data ? data.isShowProject : props.isShowProject,
            isShowHouse: data ? data.isShowHouse : props.isShowHouse
          })
    prom.then((res) => {
      treeListBusiness.value = res
      if (res.length > 0) {
        orgId.value = res[0].id
        orgObj = res[0]
        resoleCheckData(orgId.value)
        emits('update', { orgObj, orgId, orgCheck })
      }
    })
  }

  function treeChangeBusiness(event) {
    if (!event.length) {
      treeListBusiness.value[0].selected = true
      orgId.value = treeListBusiness.value[0].id
      orgObj = treeListBusiness.value[0]
    } else {
      orgId.value = event[0] ? event[0].id : ''
      orgObj = event[0]
    }
    resoleCheckData(orgId.value)
    emits('update', { orgObj, orgId, orgCheck })
  }

  function resoleCheckData(orgId) {
    try {
      treeListBusiness.value.forEach((item, index) => {
        if (item.id == orgId) {
          orgCheck = {
            title: item.orgName,
            level: item.level,
            id: item.id
          }
          throw Error()
        } else {
          if (item.children) {
            item.children.forEach((childItem, childIndex) => {
              if (childItem.id == orgId) {
                orgCheck = {
                  title: item.orgName + '-' + childItem.orgName,
                  level: childItem.level,
                  id: item.id
                }
                throw Error()
              } else {
                if (childItem.children) {
                  childItem.children.forEach((grandItem, grandIndex) => {
                    if (grandItem.id == orgId) {
                      orgCheck = {
                        title: item.orgName + '-' + childItem.orgName + '-' + grandItem.orgName,
                        level: grandItem.level,
                        id: item.id
                      }
                      throw Error()
                    }
                  })
                }
              }
            })
          }
        }
      })
    } catch (e) {}
  }
</script>
<template>
  <div class="organizationList">
    <div class="organTit">
      <h3>组织架构</h3>
    </div>
    <Tree :data="treeListBusiness" @on-select-change="treeChangeBusiness" class="tree_render"></Tree>
  </div>
</template>
<style scoped lang="scss">
  .organizationList {
    flex: 0 0 300px;
    padding: 0 10px;
    height: 100%;
    border: 1px solid #ccc;
    margin-right: 20px;
    border-radius: 8px;
    max-height: 100%;
    overflow-y: auto;
    position: relative;

    .organTit {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 15px 10px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

    .tree_render {
      margin-top: 62px;
    }
  }
</style>
